import 'package:demo_proj01/pages/hot_page_vm.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HotPage extends StatefulWidget {
  const HotPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HotPageState();
  }
}

class _HotPageState extends State<HotPage> {
  final HotPageVm viewModel = HotPageVm();

  @override
  void initState() {
    super.initState();
    viewModel.getHotKeyList();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) {
        return viewModel;
      },
      child: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(children: [_searchBar(), _hotKeyView()]),
          ),
        ),
      ),
    );
  }

  Widget _searchBar() {
    return Container(
      padding: EdgeInsets.only(left: 20, right: 20, top: 6, bottom: 6),
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(width: 0.5, color: Colors.grey),
          bottom: BorderSide(width: 0.5, color: Colors.grey),
        ),
      ),
      child: Row(
        children: [
          Text("搜索热词", style: TextStyle(fontSize: 14, color: Colors.black)),
          Expanded(child: SizedBox()),
          Image.asset(
            "assets/images/icons-search-32.png",
            width: 30,
            height: 30,
          ),
        ],
      ),
    );
  }

  Widget _hotKeyView() {
    return Consumer<HotPageVm>(
      builder: (context, vm, child) {
        return GridView.builder(
          padding: EdgeInsets.all(6),
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            // 主轴间隔
            mainAxisSpacing: 6,
            // 横轴间隔
            crossAxisSpacing: 6,
            // 最大横轴尺寸
            maxCrossAxisExtent: 100,
            // 宽高比
            childAspectRatio: 2,
          ),
          itemBuilder: (context, index) {
            return Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Text(vm.hotKeyList?[index].name ?? ""),
            );
          },
          itemCount: vm.hotKeyList?.length ?? 0,
        );
      },
    );
  }
}
